﻿<FluentOverflow OnOverflowRaised="OverflowHandler" Style="border: 1px solid lightgray">
    <ChildContent>
        @foreach (var item in Items)
        {
            <FluentOverflowItem><FluentBadge>@item</FluentBadge></FluentOverflowItem>
        }
    </ChildContent>
    <MoreButtonTemplate>
        <FluentBadge Style="min-width: 32px; max-width:32px;">
            @($"+{context.ItemsOverflow.Count()}")
        </FluentBadge>
    </MoreButtonTemplate>
    <OverflowTemplate>
        <FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
            @foreach (var item in context.ItemsOverflow)
            {
                <div style="margin: 5px;">@item.Text</div>
            }
        </FluentTooltip>
    </OverflowTemplate>
</FluentOverflow>

<FluentButton @onclick="@AddNewItemClick">Add</FluentButton>

@code
{
    static string[] Catalog = new[] { "Blazor", "WPF", "Microsoft", "#Framework",
                                      "Electron", "WinForms", "MAUI", "Fluent Reality",
                                      "Office", "Installation", "Azure", "DevOps" };

    List<string> Items = new List<string>() { Catalog[0], Catalog[1] };

    void OverflowHandler(IEnumerable<FluentOverflowItem> items)
    {
        var text = String.Join("; ", items.Select(i => i.Text));
        
    }

    void AddNewItemClick()
    {
        var index = new Random().NextInt64(Catalog.Length);
        Items.Add(Catalog[index]);
    }
}